<!-- 电子运单 -->
<template>
	<view class="list_item">
		<view @click="$goBack('/pages/waybill/detail?id='+items.id+'&taskId='+items.taskId)">
			<view class="item_top">
				<view class="view_pai">
					<view class="text_pai">{{items.vehCode}}</view>
					<view class="text_pai" v-if="items.trailerVehCode">-</view>
					<view class="text_pai" v-if="items.trailerVehCode">{{items.trailerVehCode}}</view>
				</view>
				<view class="view_state"><text
						class="text_state">{{items.approvalState==1?'作废申请中/':''}}{{stateList[items.billState]||items.billState}}</text>
				</view>
			</view>
			<view class="item_line"></view>
			<view class="item_center">
				<view class="center_top">
					<view class="view_jia"><text>驾</text></view>
					<text class="text_name">{{items.driverName}}</text>
					<text class="text_phone">{{items.driverTel}}</text>
				</view>
				<view class="center_line"></view>
				<view class="center_top">
					<view class="view_ya"><text>押</text></view>
					<text class="text_name">{{items.escortName}}</text>
					<text class="text_phone">{{items.escortTel}}</text>
				</view>
			</view>
			<view class="item_bottom">
				<view class="bottom_text">
					<view class="text_left">运输货物:</view>
					<view class="text_right">{{items.goodsInfo}}</view>
				</view>
				<view class="bottom_text">
					<view class="text_left">卸货日期:</view>
					<view class="text_right">{{items.unloadingDate}}</view>
				</view>
				<view class="bottom_text">
					<view class="text_left">卸货地点:</view>
					<view class="text_right">{{items.unloadingAddr}}</view>
				</view>
			</view>
		</view>
		<view class="waybill-btn" v-if="userType" v-show="items.billState!='50' && items.billState!='60'">
			<!-- 企业管理人员操作按钮 -->
			<view class="btn" @click="edityd(items)"
				v-show="items.approvalState!=1">
				<text>修改运单</text>
			</view>
			<view class="btn" @click="showToVoid=true" v-show="items.approvalState!=1">
				<text>作废运单</text>
			</view>
			<view class="btn" @click="showGoodsOk=true" v-if="items.billState=='10'" v-show="items.approvalState!=1">
				<text>装货确认</text>
			</view>
			<view class="btn" @click="completeState=true" v-else v-show="items.approvalState!=1">
				<text>运输完成</text>
			</view>

			<!-- 待审核运单 -->
			<view class="btn" @click="approvalOk" v-show="items.approvalState==1">
				<text>审核通过</text>
			</view>
			<view class="btn" @click="approvalNo" v-show="items.approvalState==1">
				<text>审核不通过</text>
			</view>
		</view>
		<view class="waybill-btn" v-else v-show="items.approvalState != 1 && items.billState != 0">
			<!-- 驾压人员操作按钮 -->
			<view class="btn" @click="$goBack('./toVoid?param='+param)"
				v-if="items.billState!='60' && items.billState!='50'">
				<text>取消运单</text>
			</view>
			<view class="btn" @click="$goBack('./detail?type=2&id='+items.id+'&taskId='+items.taskId)">
				<text>行车日志</text>
			</view>
			<view class="btn" @click="$goBack('./statusChange?param='+param)"
				v-show="!['50','60'].includes(items.billState)">
				<text>状态变更</text>
			</view>
		</view>
		<modal-confirm :data="toVoidData" :visible.sync="showToVoid" @confirm="toVoid"></modal-confirm>
		<modal-shipment-ok :data="items" :visible.sync="completeState" @confirm="toComplete"></modal-shipment-ok>
		<modal-goods-ok :items="items" :visible.sync="showGoodsOk" @confirm="goodsOk"></modal-goods-ok>
	</view>
</template>

<script>
	import modalGoodsOk from '@/components/tool-modal/modal-goods-ok';
	import modalShipmentOk from '@/components/tool-modal/modal-shipment-ok';
	import modalConfirm from '@/components/tool-modal/modal-confirm';
	import {
		dateFormat
	} from '@/common/util.js';
	export default {
		props: ['items', 'approvalState'],
		components: {
			modalGoodsOk,
			modalConfirm,
			modalShipmentOk
		},
		data() {
			return {
				stateList: {
					'10': '已派单',
					'11': '已发车',
					'20': '已装货',
					'30': '运输中',
					'40': '已卸货',
					'50': '已完成',
					'60': '已回厂',
					'0': '已作废'
				},
				showGoodsOk: false,
				showToVoid: false,
				toVoidData: {
					title: '运单状态变更',
					content: '确定将当前运单状态变更为作废运单？'
				},
				completeState: false,
				completeData: {
					title: '运输完成变更',
					content: '确定将当前运单状态变更为运输完成？'
				}
			}
		},
		computed: {
			param() {
				return JSON.stringify(this.items);
			},
			userType() {
				return this.$store.state.userInfo.userRoleType == 2; // 2 为企业人员
			}
		},
		methods: {
			edityd(item){
				// console.log(item,8888)
				this.$api.busibillDatail({
					id: item.id
				}).then((res) => {
					const resData = res.data.data;
					// console.log(resData, '-------------')
					if(resData.billExtendInfoVOList.length > 0){
						let a = ''
						this.$goBack('./newEdit/newEdit?dispCheckId='+a+'&taskId=' + item.taskId +'&id=' + item.id +'&page=3', 2)
						// this.$goBack('./newEdit/newEdit?id='+items.id+'&taskId='+items.taskId)
					}else{
						this.$goBack('./edit?id='+item.id+'&taskId='+item.taskId)
					}
					// let info = resData.busiTaskaddrList;  busiTaskDetailInVoExtend
					
				
				})
			},
			refresherList() {
				setTimeout(() => {
					this.$emit('refresherList');
				}, 1500)
			},
			// 作废审核-不通过
			approvalNo() {
				this.changeWaybill({
					id: this.items.id,
					taskId: this.items.taskId,
					billState: this.items.billState,
					approvalState: 2,
					approvalResult: 0
				}, '已审核不通过');
			},
			// 作废审核-通过
			approvalOk() {
				this.changeWaybill({
					id: this.items.id,
					taskId: this.items.taskId,
					billState: 0,
					approvalState: 2,
					approvalResult: 1
				}, '已审核通过');
			},
			// 装货确认
			goodsOk(actualGoodsWeight) {
				this.changeWaybill({
					id: this.items.id,
					taskId: this.items.taskId,
					vehId: this.items.vehId,
					vehCode: this.items.vehCode,
					trailerId: this.items.trailerId,
					trailerVehCode: this.items.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '30', // 20 装货确认后为 30
					actualGoodsWeight
				}, '已确认装货');
			},
			// 运输完成
			toComplete(endTransTimes) {
				this.changeWaybill({
					id: this.items.id,
					taskId: this.items.taskId,
					vehId: this.items.vehId,
					vehCode: this.items.vehCode,
					trailerId: this.items.trailerId,
					trailerVehCode: this.items.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '50',
					endTransTimes,
				}, '已修改为运输完成')
			},
			// 作废运单
			toVoid() {
				this.changeWaybill({
					id: this.items.id,
					taskId: this.items.taskId,
					vehId: this.items.vehId,
					vehCode: this.items.vehCode,
					trailerId: this.items.trailerId,
					trailerVehCode: this.items.trailerVehCode,
					personType: this.userType ? 0 : 1,
					billState: '0',
					cancelWay: 2,
				}, '已作废运单')
				// this.showToVoid = false
			},
			changeWaybill(formData = {}, msg = "操作成功") {
				this.$api.busibillUpdate(formData).then((res) => {
					// console.log(res);
					uni.showToast({
						title: msg,
						success: () => {
							this.refresherList();
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss">
	.list_item {
		border-radius: 10rpx;
		background-color: #FFFFFF;
		margin: 20rpx 20rpx 0rpx 20rpx;
		padding-bottom: 35rpx;

		.waybill-btn {
			text-align: right;

			padding: 35rpx 35rpx 0;

			.btn {
				display: inline-block;
				line-height: 1.6em;
				font-size: 28rpx;
				padding: 0.4em 1em;
				border: 3rpx solid $app-color;
				border-radius: 1.2em;
				margin-left: 15rpx;

				text {
					color: $app-color;
				}
			}
		}

		.item_top {
			display: flex;
			justify-content: space-between;
			// background-color: #E80080;
			height: 100rpx;
			border-radius: 10rpx;

			.view_pai {
				border-left: 5rpx solid $app-color;
				padding-left: 30rpx;
				height: 40rpx;
				// background-color: #07C160;
				margin-top: 30rpx;
				display: flex;

				.text_pai {
					font-size: 28rpx;
					font-weight: 700;

					&:nth-child(2) {
						padding: 0 8rpx;
					}
				}
			}

			.view_state {
				height: 50rpx;
				border-top-right-radius: 10rpx;
				border-bottom-left-radius: 8rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;
				background-color: $app-color;
				display: flex;
				align-items: center;

				.text_state {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

		}

		.item_line {
			height: 1rpx;
			background-color: #F2F2F2;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}

		.item_center {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			.center_top {
				display: flex;
				height: 50rpx;
				align-items: center;

				.view_jia {
					width: 45rpx;
					height: 45rpx;
					background-color: #4CAF50;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.view_ya {
					width: 45rpx;
					height: 45rpx;
					background-color: #2196F3;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.text_name {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 700;
				}

				.text_phone {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #666666;
					flex: 1;
					word-break: break-all;
				}
			}

			.center_line {
				margin-left: 22rpx;
				height: 15rpx;
				width: 5rpx;
				background-color: #000000;
			}

		}

		.item_bottom {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;

			.bottom_text {
				flex: 1;
				display: flex;
				padding: 10rpx 0;
				align-items: flex-start;

				.text_left {
					font-size: 30rpx;
					color: #666666;
				}

				.text_right {
					flex: 1;
					margin-left: 30rpx;
					font-size: 30rpx;
				}

			}
		}
	}
</style>